<template>
  <div class="table">
    <div class="topBtn">
      <!-- <span>活动配置条件</span> -->
      <el-button type="primary" size="small" @click="openSelectShop"
        >添加奖品</el-button
      >
    </div>
    <el-table :data="prizeListSelect" border style="width: 100%">
      <el-table-column prop="id" label="序号" width="60"> </el-table-column>
      <el-table-column prop="name" label="奖品名称"> </el-table-column>
      <el-table-column prop="code" label="奖品主图">
        <template slot-scope="scope">
          <el-image
            v-if="scope.row.img"
            style="width: 80px; height: 80px"
            :src="scope.row.img"
            :preview-src-list="[scope.row.img]"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="code" label="奖品编号"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!-- <el-button type="primary" size="mini" @click="editCondition(scope.row)">编辑</el-button> -->
          <el-button
            type="danger"
            size="mini"
            @click="delCondition(scope.$index)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- <div class="block">
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
        </div> -->

    <!-- 添加条件弹框 -->
    <el-dialog
      title="添加关联商品"
      @closed="closedFn"
      width="40%"
      :visible.sync="dialogVisible"
    >
      <div class="openBox">
        <div>
          <div style="display: flex; justify-content: space-between; margin-bottom: 5px">
            <div>
              卖场：
              <el-select
                v-model="marketId"
                clearable
                @change="selectMarket"
                filterable
                placeholder="请选择卖场"
              >
                <el-option
                  v-for="item in marketList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </div>
            <div style="display: flex;">
              <el-input
                v-model="searchShop"
                placeholder="请输入商品名称"
                clearable
                @input="clearShopFn"
              ></el-input>
              <el-button type="primary" size="small" @click="searchShopFn"
                >搜索</el-button
              >
            </div>
          </div>
          <el-table
            border
            @selection-change="handleSelectionChange"
            :data="goodsList"
            style="width: 100%; margin: 20px 0"
          >
            <el-table-column align="center" type="selection" width="50">
            </el-table-column>
            <el-table-column
              prop="date"
              align="center"
              label="商品主图"
              width="80"
            >
              <template slot-scope="scope">
                <img
                  style="width: 30px; height: 30px"
                  :src="scope.row.img"
                  alt=""
                />
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              align="center"
              label="商品名称"
              width="auto"
            >
            </el-table-column>
            <el-table-column
              prop="stock"
              align="center"
              label="库存"
              width="auto"
            >
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChangeShop"
            @current-change="handleCurrentChangeShop"
            :current-page="selectPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="selectPagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="selectTotal"
            background
          >
          </el-pagination>
        </div>
        <!-- <el-radio-group v-model="shopId" v-infinite-scroll="loadShop">
                    <el-radio :label="item.id" v-for="(item,index) in goodsList" :key="index">
                        <img :src="item.img" alt="">
                        {{item.name}}
                    </el-radio>
                </el-radio-group> -->
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="selectShop">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    prizeList: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      page: 1,
      pagesize: 10,
      total: 0,
      conditionListTable: [],
      conditionList: [],

      dialogVisible: false,

      selectPage: 1,
      selectPagesize: 5,
      selectTotal: 0,
      goodsList: [],
      selectShopArr: [], //选择的商品
      searchShop: "",

      prizeListSelect: [], //已选择的奖品
      marketId: "", //卖场id
      marketList: [],
    };
  },
  watch: {
    prizeList(val) {
      this.prizeListSelect = val;
    },
  },
  mounted(){
    this.remoteMethod();
  },
  methods: {
    // 获取卖场列表
    remoteMethod() {
      this.$http.post("/api/root/Market/marketList").then((res) => {
        console.log(res, "卖场列表");
        if (res.code == 1) {
          this.marketList = res.data ? res.data : [];
        }
      });
    },
    // 选择卖场
    selectMarket() {
      this.selectPage = 1;
      this.selectPagesize = 10;
      this.getShopOkList();
    },
    // 打开选择商品对话框
    openSelectShop() {
      this.dialogVisible = true;
      this.getShopOkList();
    },

    // 对话框确定
    selectShop() {
      if (!this.selectShopArr.length) {
        this.$message.warning("请选择商品");
        return;
      }
      // 是否已选择
      for (let i = 0; i < this.selectShopArr.length; i++) {
        let prizeIndex = this.prizeListSelect.findIndex(
          (item) => item.id == this.selectShopArr[i].id
        );
        let shopName = this.selectShopArr[i].name;
        if (prizeIndex != -1) {
          this.$message.warning("已添加过" + shopName);
          return;
        } else {
          this.prizeListSelect.push(this.selectShopArr[i]);
          this.dialogVisible = false;
          console.log(this.selectShopArr[i], "选择的商品");
        }
      }
      this.$emit("listenChild", this.prizeListSelect);
    },

    // 加载更多
    loadShop() {
      this.getShopOkList("load");
    },

    // 获取可关联奖品列表
    getShopOkList() {
      let params = {
        keyword: this.searchShop,
        page: this.selectPage,
        pagesize: this.selectPagesize,
        market_id:this.marketId
      };
      this.$http.post("/api/root/activity/prize/lists", params).then((res) => {
        console.log(res, "商品列表");
        if (res.code == 1) {
          this.goodsList = res.data.data ? res.data.data : [];
          this.selectTotal = res.data.count;
        }
      });
    },

    // 搜索可关联商品
    searchShopFn() {
      this.selectPage = 1;
      this.selectPagesize = 5;
      this.getShopOkList();
    },
    // 清除搜索
    clearShopFn() {
      if (this.searchShop == "") {
        this.selectPage = 1;
        this.selectPagesize = 5;
        this.getShopOkList();
      }
    },

    // 删除已选择的奖品
    delCondition(index) {
      this.prizeListSelect.splice(index, 1);
      this.$emit("listenChild", this.prizeListSelect);
    },

    // 全选
    handleSelectionChange(val) {
      console.log(val, "选择的商品");
      this.selectShopArr = val;
    },

    // 对话框关闭
    closedFn() {
      this.goodsList = [];
      this.selectPage = 1;
      this.selectShopArr = [];
      this.selectPagesize = 5;
      this.searchShop = "";
    },

    handleSizeChange(val) {
      this.page = 1
      this.pagesize = val;
      this.getConditionList();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getConditionList();
    },

    handleSizeChangeShop(val) {
      this.selectPage = 1;
      this.selectPagesize = val;
      this.getShopOkList();
    },
    handleCurrentChangeShop(val) {
      this.selectPage = val;
      this.getShopOkList();
    },
  },
};
</script>

<style lang="less">
.table {
  padding-bottom: 20px;
  .block {
    display: flex;
    justify-content: flex-end;
    padding-top: 20px;
  }
}
.topBtn {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  span {
    font-weight: 600;
    margin-right: 10px;
  }
}

.conditionBox {
  .item {
    display: flex;
    align-items: center;
    margin-top: 15px;
    .tit {
      width: 70px;
      text-align: right;
    }
    .el-input {
      width: 30%;
      margin-right: 10px;
    }
  }
}

.openBox {
  .el-radio-group {
    display: flex;
    flex-direction: column;
    overflow: auto;
    height: 200px;
    .el-radio {
      margin: 10px 0;
      display: flex;
      align-items: center;
      .el-radio__label {
        display: flex;
        align-items: center;
      }
      img {
        width: 40px;
        height: 40px;
        margin-right: 10px;
      }
    }
  }
}
</style>

